import React, { useState } from 'react'
import api from '../../api/axios'
import { Popup, Button, Form, Input, } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Register() {
  const [visible1, setVisible1] = useState(false)
  const Navigate = useNavigate()
  const onFinish = async (value) => {
    const res = await api.post('/api/register', {
      username: value.username,
      password: value.password
    })
    const { code, data } = res.data
    console.log(res)
    if (code == 200) {
      setVisible1(true)
    }
  }
  const goLogin=()=>{
     Navigate('/login')
  }
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            注册
          </Button>
        }
      >
        <Form.Item
          name='username'
          label='用户名'
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input placeholder='请输入密码' />
        </Form.Item>
      </Form>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '40vh' }}
      >
       <span>注册成功</span>
        <Button onClick={()=>goLogin()}  style={{
                width: '350px', height: '50px', marginLeft: '13px',
                color: '#fff', background: 'rgba(111, 13, 141, 0.87)', borderRadius: '40px'
            }}>去登录</Button>
      </Popup>
    </div>
  )
}

export default Register
